<template>
	<view>
		<view class="updatauser_bg" @click="hidePopup"></view>
		<view class="updatauser">
			<block v-if="index==0">
				<image :src="userInfo.headimg" class="updatauser_avatar"></image>
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="updatauser_button">点击获取头像</button>
			</block>
			<block v-if="index==1">
				<input type="nickname" class="updatauser_input" placeholder="请输入您的昵称" v-model="userInfo.nickname" @blur="inputNickName" @confirm="inputNickName" />
			</block>
			<block v-if="index==2">
				<button class="updatauser_phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber">请授权您的手机号</button>
			</block>
			<view class="updatauser_text">（用于个人信息展示）</view>
			<image src="/static/updataUser_bg.png" class="updatauser_f"></image>
		</view>
	</view>
</template>

<script>
	const qiniuUploader = require('@/util/qiniuUploader.js')
	import { uploadMixin } from 'util/mixins.js';
	export default {
		mixins: [uploadMixin],
		name:"updataUser",
		props: {
			userInfo: {
				type: Object
			},
			login: {
				typeo: Boolean
			},
			indexs: {
				type: Number,
				default: 0,
			}
		},
		
		data() {
			return {
				index: this.indexs,
				// userInfo: {
				// 	headimg: '',
				// 	nickname: ''
				// }
				newVersion: true
			};
		},
		
		methods: {
			chooseavatar(e){
				let avatar = e.detail.avatarUrl
				this.uploadFile(avatar).then(avatarUrl => {
					this.userInfo.headimg = avatarUrl
					this.index = 1
				})
			},
			
			hidePopup(){
				this.$emit('click')
			},
			
			inputNickName(e){
				// let that = this
				// console.log(this.userInfo.nickname)
				// if (!that.userInfo.nickname.trim()) {
				// 	uni.showToast({
				// 		title: '请输入昵称',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				console.log(this.userInfo,e)
				this.$emit('success', this.userInfo)
				if(this.login){
					this.index = 2
				}
			},
			
			// 获取手机号
			getphonenumber(e){
				let that = this
				
				if(e.detail.code){
					uni.request({
						url: getApp().globalData.url + '/sys/checkuser',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							token: uni.getStorageSync('token')
						},
						data: {
							code: e.detail.code
						},
						success(res) {
							if(res.data.code==20000){
								if(res.data.flag == 1){
									uni.switchTab({
										url: '/pages/index/index'
									})
								}else{
									// uni.reLaunch({
									// 	url: '/pages/index/index?loginNo=1'
									// })
									that.$emit('successPhone')
								}
								// that.hidePopup()
							}else{
								uni.showToast({
									title: res,
									icon: 'none'
								})
							}
							
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.updatauser_bg{
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}
	.updatauser{
		position: fixed;
		top: 300rpx;
		left: 75rpx;
		width: 600rpx;
		height: 580rpx;
		background: #EBFFFE;
		border-radius: 40rpx;
		z-index: 2;
		
		&_avatar{
			margin-top: 60rpx;
			margin-left: 225rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		&_button{
			padding: 0;
			margin-top: 30rpx;
			marign-left: 100rpx;
			width: 300rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background: #03AEA5;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			list-style: 3rpx;
		}
		&_input{
			margin-top: 150rpx;
			margin-left: 75rpx;
			width: 450rpx;
			height: 80rpx;
			border: 1rpx solid #888888;
			border-radius: 10rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 80rpx;
		}
		&_phone{
			margin-top: 150rpx;
			margin-left: 75rpx;
			width: 450rpx;
			height: 80rpx;
			background: #03AEA5;
			border-radius: 10rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}
		&_text{
			position: absolute;
			bottom: 180rpx;
			left: 0rpx;
			width: 100%;
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #888888;
			line-height: 30rpx;
			text-align: center;
			z-index: 2;
		}
		&_f{
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			width: 600rpx;
			height: 200rpx;
			z-index: 1;
		}
	}
</style>